<template>

	<view class="flex-col homepage">
		<view class="wrapper">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
				<u-form-item label="车牌号" labelWidth="120" prop="relotion" borderBottom ref="item1">
					<view class="container">
						<u--input v-model="form.vehicleNumber" border="none" placeholder="请输入车牌号"></u--input>
					</view>
				</u-form-item>

				<u-form-item label="车辆品牌" labelWidth="140" prop="userName" borderBottom ref="item1">
					<view class="container">
						<u--input v-model="form.vehicleBrand" border="none" placeholder="请输入车辆品牌"></u--input>
					</view>
				</u-form-item>

				<u-form-item label="车辆型号" labelWidth="140" prop="documentType" borderBottom ref="item1">
					<view class="container">
						<u--input v-model="form.vehicleModel" border="none" placeholder="请输入车辆型号"></u--input>
					</view>
				</u-form-item>

				<u-form-item label="车身颜色" labelWidth="140" prop="number" borderBottom ref="item1">
					<view class="container">
						<u--input v-model="form.vehicleColor" border="none" placeholder="请输入车身颜色"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="车身图片" labelWidth="140" prop="number" borderBottom ref="item1">
					<u-upload class="upload" :width="600" :height="200" :fileList="fileList1" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
				</u-form-item>

				<uni-section title="住户信息" type="line">
					<uni-card>
						<view class="flex-row wrapper-two">
							<view class="u-line-1 text-two">住户姓名:</view>
							<view class="u-line-1 text-three">{{user.userName}}</view>
						</view>
						<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>
						<view class="flex-row wrapper-two">
							<view class="u-line-1 text-two">手机号码:</view>
							<view class="u-line-1 text-three">{{user.phone}}</view>
						</view>
					</uni-card>
				</uni-section>
				<u-button @click="addCar()" class="button">下一步</u-button>
			</u--form>


		</view>



	</view>
</template>
<script>
	import request from '../../../request.js'
	export default {
		data() {
			return {
				userId: localStorage.getItem("userId"),
				user: {},
				fileList1: [],
				form: {
					user: '',
					vehicleNumber: '',
					vehicleBrand: '',
					vehicleModel: '',
					vehicleColor: '',
					fileUrl: ''
				}
			}
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			//添加我的车辆
			addCar() {
				this.form.userId = this.userId
				request({
					url: `/carshop/vehicle-car/addMyCar`,
					method: 'post',
					data: this.form,
					success: (res) => {
						console.log(res.data.message);
						request({
							url: `/systemuser/file/addCarPhoto`,
							method: 'post',
							data: this.form,
							success: (res) => {

							}
						})
					}
				})
			},
			//根据userId 获取用户信息
			getUser() {
				request({
					url: `/systemuser/user/getUser/${this.userId}`,
					method: 'get',
					success: (res) => {
						console.log(res.data.data.user)
						this.user = res.data.data.user
					}
				})
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			uploadFilePromise(url) {

				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost/systemuser/file/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							this.form.fileUrl = res.data
							console.log(this.form.fileUrl)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 46rpx 35rpx 0rpx 35rpx;

		.text {
			width: 100%;
			height: 42rpx;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			color: #bab3b5;
		}

		.wrapper {
			width: 678rpx;
			height: 700rpx;
			margin-bottom: 56rpx;
			// border-top-width: 2rpx;
			// border-top-style: solid;
			//border-bottom-width: 2rpx;
			//border-bottom-style: solid;
		}

		.wrapper-two {
			width: 396rpx;
			justify-content: space-between;
			margin: 0rpx 0rpx 10rpx 23rpx;

			.text-two {
				width: 150rpx;
			}

			.text-three {
				width: 283rpx;
			}
		}

		.button {
			width: 694rpx;
			height: 90rpx;
			display: block;
			margin-right: auto;
			margin-left: auto;
			font-size: 36rpx;
			background: #006eff;
			color: #ffffff;
		}
	}
</style>
